<template>
    <h1>新增食谱页面</h1>
    <a href="/ShowFood">食谱列表</a><br>
    <table border="1">
        <tbody>
            <tr>
                <td>食谱标题</td>
                <td>
                    <input type="text" v-model="info.name">
                </td>
            </tr>
            <tr>
                <td>食谱详情</td>
                <td>
                    <textarea v-model="info.xiangqing">

                    </textarea>
                </td>
            </tr>
            <tr>
                <td>状态</td>
                <td>
                    <input type="radio" :value="true" v-model="info.state">启用
                    <input type="radio" :value="false" v-model="info.state">禁用
                </td>
            </tr>
            <tr>
                <td>食谱类型</td>
                <td>
                    <select v-model="info.tId">
                        <option value="-1">--请选择--</option>
                        <option v-for="item in Bang" :value="item.tId">{{item.tName}}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>食谱封面</td>
                <td>
                    <img :src="info.img" style="height: 100px;width: 100px;">
                    <input type="file" @change="Upload">
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: center;">
                    <input type="button" value="保存" @click="Add">
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
import { ref,onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
const router=useRouter();
onMounted(()=>{
    Bin();
})

const Bang=ref([{
    "tId": 0,
    "tName": ""
}])

const Bin=()=>{
    axios.get("https://localhost:7052/api/Food/Getall")
    .then(res=>{
        Bang.value=res.data
    })
    .catch(error=>{
        console.log(error)
    })
}

const info=ref({
    "id": 0,
  "name": "",
  "xiangqing": "",
  "state": true,
  "tId": 0,
  "img": "",
  "delete": 0
})

const Add=()=>{
    if(info.value.name==""){
        alert("食谱标题不能为空")
        return;
    }
    if(info.value.img==""){
        alert("食谱封面不能为空")
        return;
    }
    if(info.value.tId==0){
        alert("食谱类型不能为空")
        return;
    }
    if(info.value.xiangqing==""){
        alert("食谱详情不能为空")
        return;
    }
    axios.post("https://localhost:7052/api/Food/Add",info.value)
    .then(res=>{
        if(res.data>0){
            alert("添加成功")
            router.push("/ShowFood")
        }
        else{
            alert("添加失败")
        }
    })
    .catch(error=>{
        console.log(error)
    })

}

const Upload=(f:any)=>{
    var res = f.target.files[0];
    var fd = new FormData();
    fd.append("file",res)
    axios.post("https://localhost:7052/api/UpLoad/UpLoad",fd)
    .then(res=>{
        info.value.img=res.data
        alert("上传成功")
    })
    .catch(error=>{
        console.log(error)
    })
}
</script>